body {
    background-color: #f1d5da; /* 背景颜色 */
    text-align: center; /* 文本居中 */
    font-family: Arial, sans-serif; /* 字体 */
    margin: 0; /* 外边距清零 */
    padding: 0; /* 内边距清零 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 视口高度占满 */
}

.container {
    width: 90%; /* 容器宽度：屏幕宽度的90% */
    max-width: 500px; /* 容器最大宽度：500px */
}

#mainImage {
    width: 100%; /* 图片宽度：容器的100% */
    max-width: 200px; /* 图片最大宽度：200px */
    transition: all 0.3s ease; /* 所有属性过渡动画：0.3秒缓动 */
}

h1 {
    font-size: 5vw; /* 标题字体大小：视口宽度的5%（响应式） */
    color: #68495b; /* 标题颜色 */
    margin: 20px 0; /* 上下边距20px，左右边距0 */
}

button {
    font-size: 4vw; /* 按钮字体大小：视口宽度的4%（响应式） */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角5px */
    cursor: pointer; /* 鼠标悬停显示手型 */
    margin: 10px; /* 外边距10px */
    transition: all 0.3s ease; /* 过渡动画 */
}

#yes {
    background-color: #d4818e; /* “是”按钮背景色 */
    color: white; /* 文字白色 */
}

#no {
    background-color: #6784b1; /* “否”按钮背景色 */
    color: white; /* 文字白色 */
    position: relative; /* 相对定位（可能用于后续交互） */
}

.yes-screen {
    position: fixed; /* 固定定位（覆盖全屏） */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100vw; /* 宽度占满视口 */
    height: 100vh; /* 高度占满视口 */
    background-color: #ffdae0; /* 背景色 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
}

.yes-text {
    font-size: 7vw; /* 确认文字大小：视口宽度的7%（响应式） */
}

.yes-image {
    width: 50%; /* 确认图片宽度：容器的50% */
    max-width: 300px; /* 确认图片最大宽度：300px */
}

/* 平板/桌面端适配（屏幕宽度≥768px时） */
@media (min-width: 768px) {
    body {
        display: block; /* 恢复默认块级布局 */
    }

    .container {
        position: absolute; /* 绝对定位 */
        top: 50%; /* 距离顶部50% */
        left: 50%; /* 距离左侧50% */
        transform: translate(-50%, -50%); /* 自身宽高的50%偏移（居中） */
        width: auto; /* 宽度自动 */
        max-width: none; /* 取消最大宽度限制 */
    }

    #mainImage {
        width: 200px; /* 固定图片宽度 */
    }

    h1 {
        font-size: 28px; /* 固定标题字体大小 */
        margin: 20px 0;
    }

    button {
        font-size: 18px; /* 固定按钮字体大小 */
    }

    .yes-text {
        font-size: 36px; /* 固定确认文字大小 */
    }

    .yes-image {
        width: 300px; /* 固定确认图片宽度 */
    }
}